<!--
  * @Description 上传文件 卡片 - 身份证/卡片/图片
  * @Author 莫发达
  * @create 2024-09-04 14:50 周三
-->
<script setup lang="ts">
import {computed} from "vue";
import {RefreshRight, Delete, ZoomIn} from "@element-plus/icons-vue";
import type {IUploadFile} from "../types.ts";
import SvgIcon from "@/components/svg-icon/index.vue"; // 图标组件

interface IProps {
  file: IUploadFile,
  index: number
}

const props = defineProps<IProps>();
const emits = defineEmits<{
  (e: 'delete'): void
  (e: 'retry'): void
  (e: 'preview'): void
}>();

/**
 * 文件预览图片
 */
const _fileUrl = computed(() => {
  const {file} = props;
  return file.url ?? file.file?.previewUrl;
})
</script>

<template>
  <article
    class="group flex items-center bg-gray-500 rounded relative w-full select-none"
  >
    <el-image
      class="w-full h-full rounded"
      :src="_fileUrl"
      fit="cover"
    />

    <!--删除按钮-->
    <button
      type="button"
      class="absolute top-3 right-3 w-8 h-8 bg-black/30 rounded-full z-10 flex hover:bg-black/50 transition-colors duration-300"
      @click.stop="$emit('delete')"
    >
      <Delete class="w-5 h-5 text-white m-auto" />
    </button>

    <!--上传失败-->
    <section
      v-if="file.status === 'fail'"
      class="bg-black/30 absolute top-0 right-0 bottom-0 left-0 flex flex-col justify-center items-center text-white"
    >
      <button
        type="button"
        class="cursor-pointer flex flex-col items-center gap-1"
        @click="$emit('retry')"
      >
        <RefreshRight class="w-7 h-7" />
        <span>上传失败，点击重试</span>
      </button>
    </section>

    <!--上传中/等待上传-->
    <section
      v-else-if="[ 'uploading', 'ready' ].includes(file.status)"
      class="bg-black/30 absolute top-0 right-0 bottom-0 left-0 flex flex-col justify-center items-center text-white"
    >
      <div class="flex flex-col items-center gap-1">
        <SvgIcon
          svg="upload/loading"
          size="32"
          :class="{'animate-spin animate-duration-2000':file.status === 'uploading'}"
        />
        <span>
          {{ file.status === 'uploading' ? '上传中' : '等待上传' }}
        </span>
      </div>

      <el-progress
        class="absolute !top-auto !bottom-2 !left-2 !right-2 !w-auto !translate-x-0"
        style="transform: initial;"
        :percentage="file.percentage"
        :show-text="false"
      />
    </section>

    <!--上传成功-->
    <section
      v-else-if="file.status === 'success'"
      class="bg-black/30 absolute top-0 right-0 bottom-0 left-0 hidden flex-col justify-center items-center text-white group-hover:flex"
    >
      <button
        type="button"
        @click.stop="$emit('preview')"
      >
        <el-tooltip
          content="预览"
          placement="top"
        >
          <ZoomIn class="w-7 h-7 cursor-pointer" />
        </el-tooltip>
      </button>
    </section>
  </article>
</template>

<style scoped lang="less">

</style>
